<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>944 grid system preview</title>
<style>

/* CSS RESET STARTS HERE */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* CSS RESET ENDS HERE */



.grid { background:url(); }
.main { background:url();}
.center { margin:0px auto; }


/* TYPOGRAPHY STARTS HERE */

body { font-family:arial;font-size:13px;line-height:16px; }
h1 { font-size:32px;line-height:32px;letter-spacing:-1px;padding:4px 0px; }
h2 { font-size:20px;line-height:24px;letter-spacing:-1px;padding:3px 0px 5px; }
p { font-size:13px;line-height:16px;padding:5px 0px 11px;}
p.intro { font-weight:bold; }
ul, ol { padding:5px 0px 11px; }
li { line-height:16px; }

/* TYPOGRAPHY ENDS HERE */


/* GRID SYSTEM STARTS HERE */

.padded { padding:8px 16px; }
.semi-padded { padding:0px 8px; }
.horizontal-padded { padding:0px 16px; }

.top-margin { margin-top:16px; }

.full { width:944px; }
.half { width:464px; margin-right:16px; float:left; }
.third { width:304px; margin-right:16px; float:left; }
.quarter { width:224px; margin-right:16px; float:left; }
.fifth { width:176px; margin-right:16px; float:left; }
.sixth { width:144px; margin-right:16px; float:left; }

.half.last, .third.last, .quarter.last, .fifth.last, .sixth.last { margin-right:0px; }

.top-margin { margin-top:16px; }

/* GRID SYSTEM ENDS HERE */


/* FORM SYSTEM STARTS HERE ::EXPERIMENTAL::

.form-style { overflow:hidden; }

.form-style label { display:block; width:96px; float:left;clear:left;padding:5px 16px 11px 0px;line-height:16px;text-align:right; }

.form-style input { border: 1px solid #999999; -moz-border-radius: 2px; float:left; height: 16px; margin-bottom: 8px; padding: 3px; width:152px; }

.form-style input:focus { border: 1px solid #0099cc; background-color:#ddeeff; }

.form-style span.error { color:#cc0000; float:left; display:block; padding:5px 0px 11px 8px; }

FORM SYSTEM ENDS HERE */


.message-success { background:#ddffbb; border:1px solid #009900; padding:4px 8px 4px; margin-bottom:6px; }
.message-info {	background:#ccddff; border:1px solid #3366cc; padding:4px 8px 4px; margin-bottom:6px; }

a { text-decoration:none; }
a:hover { text-decoration:underline; }

.aa { font-size: 11px; line-height: 7px; padding: 0px 0px 9px; text-transform: uppercase; }

ul.horizontal-menu { padding:0px; overflow:hidden; margin-left:-8px; }
ul.horizontal-menu li {	float:left;	padding:4px 0px; }
ul.horizontal-menu li:hover { background:#666666; }
ul.horizontal-menu li a { border-right:1px solid #777777; padding:0px 8px; color:#ffffff; font-weight:bold; }
ul.horizontal-menu li.last a { border-right:none; }

.yellow { background:rgba(255,200,0,0.4); }
#footer { clear:both;background:rgba(50,50,50,0.8);color:#ffffff;overflow:hidden; }
#header { clear:both;background:rgba(50,50,50,0.8);color:#ffffff; margin-bottom:16px; }
#submenu { background:#000000; }

</style>
<body>
<div class="grid">
    <div style="background:rgba(200,50,0,1);margin-bottom:16px;">
	    <div id="header" class="full padded center">
		    This is a preview on the new 944 grid system
	    </div>
        <div id="submenu" class="full horizontal-padded center">
		    <ul class="horizontal-menu">
                <li><a href="#">Sub menu</a></li>
                <li><a href="#">Sub menu</a></li>
                <li><a href="#">Sub menu</a></li>
                <li><a href="#">Sub menu</a></li>
                <li class="last"><a href="#">Sub menu</a></li>
            </ul>
	    </div>
    </div>
	<div class="main full center">
		<div style="overflow:hidden;">
			<h1>Header</h1>
			<div class="half">
				<h2>Subheader</h2>
				<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit pharetra ante a placerat.</p>
                <!--<div class="form-style">
                    <label>Username</label>
                    <input type="text" />
                    <span class="error">* Required</span>

                    <label>Email</label>
                    <input type="text" />
                    <span class="error">* Required</span>
                </div>-->
    			<p>Etiam auctor euismod leo aliquam tincidunt. Nunc vitae porta arcu. Aliquam convallis, lacus vitae consequat interdum, turpis ligula consequat odio. </p>
				<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Praesent suscipit pharetra ante a placerat. Etiam auctor euismod leo aliquam tincidunt. Nunc vitae porta arcu. Aliquam convallis, lacus vitae consequat interdum, turpis ligula consequat odio, a placerat metus eros sit amet ipsum. Morbi pharetra metus rutrum est feugiat consectetur imperdiet ante euismod. Proin vulputate ultrices volutpat. Mauris ut ligula purus. Praesent mauris nisi, mollis tincidunt cursus in, imperdiet quis nisi. Nulla bibendum placerat est, sed gravida purus tempor quis. </p>
                <div class="message-success">EFko evok veok evokevko</div>
                <div class="message-info">EFko evok veok evokevko</div>
				<h2>Subheader</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit pharetra ante a placerat. Etiam auctor euismod leo aliquam tincidunt. Nunc vitae porta arcu. Aliquam convallis, lacus vitae consequat interdum, turpis ligula consequat odio, a placerat metus eros sit amet ipsum. Morbi pharetra metus rutrum est feugiat consectetur imperdiet ante euismod. Proin vulputate ultrices volutpat. Mauris ut ligula purus. Praesent mauris nisi, mollis tincidunt cursus in, imperdiet quis nisi. Nulla bibendum placerat est, sed gravida purus tempor quis. </p>
				<p class="aa">By designer. 2001-02-03</p>
			</div>
			<div class="quarter">
				<p>A placerat metus eros sit amet ipsum. Morbi pharetra metus rutrum est feugiat consectetur imperdiet ante euismod. Proin vulputate ultrices volutpat. Mauris ut ligula purus. Praesent mauris nisi, mollis tincidunt cursus in, imperdiet quis nisi. Nulla bibendum placerat est, sed gravida purus tempor quis. </p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <ul>
                    <li><a href="#">Morbi pharetra</a></li>
                    <li><a href="#">Morbi pharetra</a></li>
                    <li><a href="#">Morbi pharetra</a></li>
                    <li><a href="#">Morbi pharetra</a></li>
                    <li><a href="#">Morbi pharetra</a></li>
                    <li><a href="#">Morbi pharetra</a></li>
                </ul>
			</div>
			<div class="quarter last">
                <div class="yellow semi-padded">
				    <h2>Test</h2>
				    <p>Proin vulputate ultrices volutpat. Mauris ut ligula purus. Praesent mauris nisi, mollis tincidunt cursus in, imperdiet quis nisi. Nulla bibendum placerat est, sed gravida purus tempor quis. </p>
				    <h2>Test 2</h2>
				    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit pharetra ante a placerat. Etiam auctor euismod leo aliquam tincidunt. Nunc vitae porta arcu. Aliquam convallis, lacus vitae consequat interdum, turpis ligula consequat odio, a placerat metus eros sit amet ipsum. Morbi pharetra metus rutrum est feugiat consectetur imperdiet ante euismod. Proin vulputate ultrices volutpat. Mauris ut ligula purus. Praesent mauris nisi, mollis tincidunt cursus in, imperdiet quis nisi. Nulla bibendum placerat est, sed gravida purus tempor quis. </p>
                </div>
			</div>
		</div>
	</div>
	<div id="footer" class="full center padded top-margin">
		<div class="third">
			<div class="">
				<p>Etiam auctor euismod leo aliquam tincidunt. Nunc vitae porta arcu. Aliquam convallis, lacus vitae consequat interdum, turpis ligula consequat odio, a placerat metus eros sit amet ipsum. Morbi pharetra metus rutrum est feugiat consectetur imperdiet ante euismod. Proin vulputate ultrices volutpat.</p>
			</div>
		</div>
		<div class="third">
			<div class="">
				<p>Etiam auctor euismod leo aliquam tincidunt. Nunc vitae porta arcu. Aliquam convallis, lacus vitae consequat interdum, turpis ligula consequat odio, a placerat metus eros sit amet ipsum. Morbi pharetra metus rutrum est feugiat consectetur imperdiet ante euismod. Proin vulputate ultrices volutpat. Mauris ut ligula purus. Praesent mauris nisi, mollis tincidunt cursus in, imperdiet quis nisi. Nulla bibendum placerat est, sed gravida purus tempor quis. </p>
			</div>			</div>
		<div class="third last">
			<div class="">
				<p>Etiam auctor euismod leo aliquam tincidunt. Nunc vitae porta arcu. Aliquam convallis, lacus vitae consequat interdum, turpis ligula consequat odio, a placerat metus eros sit amet ipsum. Morbi pharetra metus rutrum est feugiat consectetur imperdiet ante euismod. Proin vulputate ultrices volutpat. Mauris ut ligula purus. Praesent mauris nisi, mollis tincidunt cursus in, imperdiet quis nisi. Nulla bibendum placerat est, sed gravida purus tempor quis. </p>
			</div>
		</div>
		<div class="legal">(c) Lorem ipsum</div>
	</div>
</div>
</body>
</html>